,<template>
    <div>        
        <el-table v-loading="loading" :data="plugins">
            <el-table-column label="插件名称" align="center" prop="name"></el-table-column>                
            <el-table-column label="支持协议" align="center" prop="protocols">
                <template slot-scope="scope">
                    <span v-for="item in scope.row.protocols" :key="item">
                        {{item}},
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="是否启用" align="center" prop="enabled">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.enabled" inactive-color="#ff4949" disabled></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="id" align="center" prop="id"></el-table-column>
            <el-table-column label="标签" align="center" prop="tags"></el-table-column>   
            <el-table-column label="创建时间" align="center" prop="created_at" :formatter="dateFormat"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"   
                        type="text"
                        icon="el-icon-add"
                        @click="handleDelete(scope.row)">
                        删除</el-button>

                </template>
            </el-table-column>     
        </el-table>

        <el-dialog :visible.sync="open"  append-to-body  v-if="open" >
            <plugin-schema :operate="operate" :pluginName='pluginName' :plugin='pluginObject' @callback="handleAddPluginCallback" />
        </el-dialog>
    </div>
</template>
<script>
import {PluginsByRouteId,kongPluginDelete,PluginsByServiceId,PluginsByConsumerId} from "@/api/kong/plugins"
import PluginSchema from "../components/pluginSchema"
import moment from 'moment'
export default {
    components:{
        PluginSchema,
    },
    props:{
        serviceId:{
            type:String,
            required: false
        },
        routeId:{
            type: String,
            required: false
        },
        consumerId:{
            type: String,
            required: false
        }
    },
    data () {
        return {
            plugins:[],
            loading: false,
            open: false,
            operate: "edit",
            pluginName: "",
            pluginObject: null,
            
        }
    },
    created(){ 
        this.headlePlugins();
    },
    methods:{
        headlePlugins(){
            if(this.routeId){
                PluginsByRouteId(this.routeId).then(res =>{
                    this.plugins=res.rows;
                    // console.log("PluginsByRouteId:"+JSON.stringify(this.plugins))
                })
            }

            if(this.serviceId){
                PluginsByServiceId(this.serviceId).then(res =>{
                    this.plugins=res.rows;
                    // console.log(JSON.stringify(res))
                })
            }

            if(this.consumerId){
                PluginsByConsumerId(this.consumerId).then(res =>{
                    this.plugins =res.rows;
                    // console.log(JSON.stringify(res));
                })
            }
        },

        headlePluginStatusChange(row){

        },
        handleDelete(row){
            kongPluginDelete(row.id).then(res=>{
                this.headlePlugins();
            })
        },
        handleUpdate(row){              
            this.pluginObject = row;
            this.pluginName=row.name;
            this.open=true;
        },
        handleAddPluginCallback(row){          
        },
        //时间处理函数
        dateFormat(row, column){
            const _date = row[column.property]*1000; 
            if(_date ==undefined){return ''};
            return moment(_date).format("YYYY-MM-DD HH:mm:ss");
        },
    }
    
}
</script>
<style scoped>

</style>